<template>
    <div style='position:relative;'>
        <div
            style='text-align: center; width: 100%; max-width: 1500px; position: absolute; left: 50%; top: 0; transform: translate(-50%,0);'>
            <div class='crumbs'>
                <el-breadcrumb separator='/'>
                    <el-breadcrumb-item>
                        <i class='el-icon-lx-cascades'></i> 比赛
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class='container'>
                <div class='handle-box'>
                    比赛状态
                    <el-select clearable v-model='query.state' placeholder='' class='handle-select mr10'>
                        <el-option key='1' label='未结束' value='未结束'></el-option>
                        <el-option key='2' label='已结束' value='已结束'></el-option>
                        <el-option key='3' label='正在进行' value='正在进行'></el-option>
                    </el-select>
                    比赛等级
                    <el-select clearable v-model='query.register' placeholder='' class='handle-select mr10'>
                        <el-option key='4' label='入门(A)' value='入门(A)'></el-option>
                        <el-option key='5' label='进阶(B)' value='进阶(B)'></el-option>
                        <el-option key='6' label='提高(C)' value='提高(C)'></el-option>
                        <el-option key='7' label='专题(D)' value='专题(D)'></el-option>
                    </el-select>
                    比赛名称
                    <el-input v-model='query.name' placeholder='牛客多校赛' class='handle-input mr10'></el-input>
                    <el-button type='primary' icon='el-icon-search' @click='handleSearch' class='btn'></el-button>
                </div>
                <el-table
                    :show-header='false'
                    :data='tableData'
                    style='width:100%;'
                    class='table'>
                    <el-table-column>
                        <template #default='scope'>
                            <div style='line-height: 50px'>
                                {{ scope.row.name }}
                            </div>
                            <div style='color: gray; font-size: 14px'>
                                {{ scope.row.starttime + '到' + scope.row.endtime }}
                            </div>
                            <div v-if='scope.row.state === 0 && scope.row.register === 0'
                                 style='display: inline-block; position:absolute; top: 25px; right: 60px'>
                                <el-button type='warning' plain
                                           @click='formVisible1=true; this.idx = scope.$index; this.form = scope.row'
                                           round style='width: 100px; padding: 10px'>
                                    <div style='font-family: "黑体"; font-size: 20px'
                                    >点击报名
                                    </div>
                                </el-button>
                                <el-dialog title='比赛规则说明' :visible.sync='formVisible1' :append-to-body='true'
                                           width='30%'>
                                    The registration confirms that you:<br>
                                    * have read the contest rules<br>
                                    * will not violate the rules<br>
                                    * will not communicate with other participants, use another person's code for
                                    solutions/generators, share ideas of solutions and hacks<br>
                                    * will not attempt to deliberately destabilize the testing process and try to hack
                                    the contest system in any form<br>
                                    * will not use multiple accounts and will take part in the contest using your
                                    personal and the single account.<br>
                                    <div slot='footer' class='dialog-footer'>
                                        <el-button type='info' @click='formVisible1 = false' class='btn'
                                                   style='background-color: #8c939d'>取 消
                                        </el-button>
                                        <el-button type='warning' @click='saveEdit1' class='btn'>报 名</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div v-else-if='scope.row.state === 0 && scope.row.register === 1'
                                 style='display: inline-block; position:absolute; top: 25px; right: 60px'>
                                <el-button type='danger' plain
                                           @click='formVisible2=true; this.idx = scope.$index; this.form = scope.row'
                                           round style='width: 100px; padding: 10px'>
                                    <div style='font-family: "黑体"; font-size: 20px'
                                    >取消报名
                                    </div>
                                </el-button>
                                <el-dialog title='提示' :visible.sync='formVisible2' :append-to-body='true'
                                           width='30%'>
                                    确认取消报名吗？
                                    <div slot='footer' class='dialog-footer'>
                                        <el-button type='info' @click='formVisible2 = false' class='btn'
                                                   style='background-color: #8c939d'>取 消
                                        </el-button>
                                        <el-button type='warning' @click='saveEdit2' class='btn'>确 认</el-button>
                                    </div>
                                </el-dialog>
                            </div>
                            <div
                                v-else-if='scope.row.state === 1'
                                style='display: inline-block; position:absolute; top: 25px; right: 60px'>
                                <router-link to='/problem' style='color: black' class='route'>
                                    <el-button type='primary' plain round
                                               style='width: 100px; padding: 10px'>
                                        <div style='font-family: "黑体"; font-size: 20px'>
                                            进入比赛
                                        </div>
                                    </el-button>
                                </router-link>
                            </div>
                            <div v-else style='display: inline-block; position:absolute; top: 25px; right: 60px'>
                                <router-link to='/problem' style='color: black' class='route'>
                                    <el-button type='info' plain round style='width: 100px; padding: 10px'>
                                        <div style='font-family: "黑体"; font-size: 20px'>
                                            回顾比赛
                                        </div>
                                    </el-button>
                                </router-link>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class='pagination'>
                    <el-pagination
                        background
                        layout='total, prev, pager, next'
                        :current-page='query.pageIndex'
                        :page-size='query.pageSize'
                        :total='pageTotal'
                        @current-change='handlePageChange'
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchContest } from '../../api/index';

export default {
    name: 'contest',
    data() {
        return {
            query: {
                state: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            list: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            formVisible1: false,
            formVisible2: false,
            idx: -1,
            register: false
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            fetchContest(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        handleEdit(index, row) {
            this.editVisible = true;
            this.idx = index;
            this.form = row;
        },
        saveEdit1() {
            this.editVisible = false;
            this.$message.success(`报名成功`);
            this.form.register = true;
        },
        saveEdit2() {
            this.editVisible = false;
            this.$message.error(`取消报名成功`);
            this.form.register = true;
        },
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.table {
    width: 100%;
    font-size: 1.2em;
    padding: 30px;
}

a {
    color: #20a0ff;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}

.mr10 {
    margin-right: 10px;
}

</style>